<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../script/jquery-1.10.min.js"></script>
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<style>
    .m {
        margin: 15px;
    }
</style>
<script>
    $(document).ready(function () {

        $("#readonly  input").prop("readOnly", true)

//        var endtime = new Date("2019-01-01 18:25:00"); // 指定日期
//    var endtime = new Date(1453094034000);

        var y, M, d, h, m, s, unixtime

        function GetDate() {
            var endtime = new Date();
            var yesTime = new Date();
            var tomtime = new Date()
            y = endtime.getFullYear(); // todo
            M = endtime.getMonth() + 1; // todo  0-11
            d = endtime.getDate(); // 月份中第几天 1-31
//        var d =endtime.getDay() + 1; //todo 星期中 第几天0-6
            h = endtime.getHours();
            m = endtime.getMinutes();
            s = endtime.getSeconds();
            unixtime = endtime.getTime();


            yesTime.setDate(yesTime.getDate() - 1);
            tomtime.setDate(tomtime.getDate() + 1);
            console.log("明天:", tomtime)
            console.log("明天日期:", tomtime.toDateString())
            console.log("明天时间:", tomtime.toTimeString());
            console.log("明天:", tomtime.toJSON());
            console.log("日期对比", yesTime < tomtime)

            var options = {
                weekday: 'long',
                year: 'numeric',
                month: 'long',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric'
            };
            console.log(tomtime.toLocaleDateString('cn-Zh', options));

            console.log("昨天:", yesTime)

        }

        function SetDate() {
            GetDate(); // 执行前等待1000毫秒
            console.log(y, M, d, h, m, s, unixtime)
            $("[placeholder='Years']").val(y);
            $("[placeholder='Month']").val(M);
            $("[placeholder='Days']").val(d);
            $("[placeholder='Hours']").val(h);
            $("[placeholder='Minute']").val(m);
            $("[placeholder='Sec']").val(s);

        }

        SetDate();

        var a
        $("#timeloop").click(function () {
            window.clearInterval(a); // todo 停止循环方法
            var timeInterval = $("[placeholder='time']").val();
            $("#looptimelabel").text("当前刷新间隔" + timeInterval + "秒")
            a = setInterval(SetDate, timeInterval * 1000)

        });


    })
</script>
<body>


<div class="container">
    <div class="row m">
        <div class="col-sm-offset-4">
            <h1>当前时间</h1>
        </div>

    </div>
    <div id="readonly" class="row m">
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Years">
                <span class="input-group-addon">年</span>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Month">
                <span class="input-group-addon">月</span>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Days">
                <span class="input-group-addon">日</span>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Hours">
                <span class="input-group-addon">小时</span>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Minute">
                <span class="input-group-addon">分钟</span>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Sec">
                <span class="input-group-addon">秒</span>
            </div>
        </div>
    </div>
    <div class="row m">
        <div class="col-sm-offset-4">
            <span id="looptimelabel" class="input-group-addon"></span>
        </div>

    </div>
    <div class="row m">
        <div class="col-sm-offset-4">
            <div class="col-sm-4">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="time">
                    <span class="input-group-addon">秒</span>
                </div>
            </div>
            <div class="col-sm-4">
                <div id="timeloop" class="btn btn-success">设置循环时间</div>
            </div>
        </div>
    </div>
</div>

</body>
</html>